<template>
	<div class="extract_detail">
		<el-form inline ref="ruleFormRef" :model="formData" :rules="rules" label-width="150px">
			<el-row>
				<el-col :span="24">
					<el-row>
						<el-col :span="20">
							<el-form-item prop="userName" label="用户" style="width: 100%">
								<el-input disabled v-model="formData.userName" clearable style="width: 100%"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-button style="margin-left: 10px" type="success" @click="onShowUserModal">选择用户</el-button>
						</el-col>
					</el-row>
				</el-col>
				<el-col :span="24">
					<el-form-item prop="money" label="提现金额" style="width: 100%">
						<el-input v-model="formData.money" clearable style="width: 100%"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="类型" style="width: 100%">
						<el-select v-model="formData.add" style="width: 100%">
							<el-option v-for="(item, index) in extractType" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="项目" style="width: 100%">
						<el-select v-model="formData.project" style="width: 100%">
							<el-option v-for="(item, index) in extractProject" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="状态" style="width: 100%">
						<el-select v-model="formData.moneyStatus" style="width: 100%">
							<el-option v-for="(item, index) in extractMoneyStatus" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="备注" style="width: 100%">
						<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="formData.note" clearable style="width: 100%"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<el-dialog title="选择用户" v-model="isShowUserModal" width="769px">
			<CustomerModal ref="customerModalRef" />
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancelCustomer" size="default">取消</el-button>
					<el-button type="primary" @click="onSubmitCustomre(customerModalRef)" size="default">确认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup nama="AddExtractDetail">
import { ElMessage } from 'element-plus';
import CustomerModal from './CustomerModal.vue';
import { extractType, extractMoneyStatus, extractProject } from '/@/stores/dic';

const customerModalRef = ref();
const ruleFormRef = ref();
const isShowUserModal = ref(false);
const formData = ref({
	userName: '',
	add: '',
	moneyStatus: '',
	note: '',
	project: '',
	userId: 0,
});
const rules = {
	userName: [{ required: true, trigger: 'blur', message: '请选择用户' }],
	money: [{ required: true, trigger: 'blur', message: '请输入提现金额' }],
};

const onShowUserModal = () => {
	isShowUserModal.value = true;
};

const onSubmitCustomre = () => {
	if (customerModalRef.value.userInfo == undefined) {
		return ElMessage.error('请选择一位用户');
	}
	console.log(customerModalRef.value.userInfo);
	formData.value.userName = customerModalRef.value.userInfo.name;
	formData.value.userId = customerModalRef.value.userInfo.id;
	isShowUserModal.value = false;
};

const onCancelCustomer = () => {
	isShowUserModal.value = false;
};

defineExpose({
	formData,
	ruleFormRef,
});
</script>
<style lang="scss"></style>
